<template>
  <div class="flex-r flex-fill bc13 pos-r menus">
    <div class="toggle-width pos-r bcf round5 mart5 flex-c" :style="{width:sideBarExpand?'230px':'56px'}">
      <div style="height:65px;" class="bdbso flrc fs16 pad2">
        <mu-button @click="sideBarToggle" icon color="primary" slot="left" v-if="$isMicro">
          <mu-icon value="format_indent_increase" v-show="!sideBarExpand"></mu-icon>
          <mu-icon value="format_indent_decrease" v-show="sideBarExpand"></mu-icon>
        </mu-button>
        <div class="pad5 fwb c1" v-show="sideBarExpand || !$isMicro">EZ</div>
        <div class="flex1 fwb" v-show="sideBarExpand">ERP</div>
      </div>
      <mu-list class="flex1" toggle-nested :toggle-nested-type="sideBarExpand?'expand':'popover'" :key="sideUpdateKey">
        <EzMenu :menu="menu" @open="onChildOpen" :key="`menu_${index}`" :index="index" v-for="(menu,index) in menus" :sideBarExpand="sideBarExpand"></EzMenu>
      </mu-list>
    </div>
    <div class="flex1" style="width: 0">
      <div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>

import EzMenu from "@/comps/menu/EzMenu.vue";

export default {
  name: "v1-layout",
  components: {EzMenu},
  data() {
    return {
      sideBarExpand: true,
      isFocusSearch: false,
      model: {},
      menus: [],
      user: {},
      sideUpdateKey:"",
    }
  },
  mounted() {
    if (process.env["VUE_APP_MENU_SRC "] === "api"){
      this.getMenuFromApi()
    }else {
      this.getMenu()
    }
    this.user = this.$ezstore.auth.getUser()
  },
  methods: {
    onChildOpen(v, index) {
      for (let child in this.menus) {
        if (child*1 === index) {
          this.$set(this.menus[child], "_open", v)
        } else {
          this.$set(this.menus[child], "_open", false)
        }
      }
    },
    sideBarToggle() {
      this.sideBarExpand = !this.sideBarExpand;
      this.open = '';
      this.test = this.$ezstore.auth.getIsLogin()
    },
    focusSearch() {
      this.isFocusSearch = !this.isFocusSearch
    },
    //从网络获取菜单
    getMenuFromApi() {
      this.$http.post_core("/core/admin/Menu/my",{},res=>{
        let menus = res.data
        if (this.$env.VUE_APP_EZ_APP_ID === '') {
          //单体运行
          this.menus = menus
        } else {
          //服务运行
          let newMenus = []
          for (let menu of menus) {
            if (menu.model.appId === this.$env.VUE_APP_EZ_APP_ID) {
              newMenus.push(menu)
            }
          }
          this.initMenu(newMenus)
          this.menus = newMenus
        }
      })
    },
    //从本地获取菜单
    getMenu() {
      let menus = this.$ezstore.auth.getMenus()
      if (this.$env.VUE_APP_EZ_APP_ID === '') {
        //单体运行
        this.menus = menus
      } else {
        //服务运行
        let newMenus = []
        for (let menu of menus) {
          if (menu.model.appId === this.$env.VUE_APP_EZ_APP_ID) {
            newMenus.push(menu)
          }
        }
        this.initMenu(newMenus)
        this.menus = newMenus
      }
    },
    initMenu(menus) {
      let find = false
      for (let item of menus) {
        item._open = false
        if (item.url === this.$route.path) {
          item._open = true
          find = true
        }
        if (item.children.length > 0) {
          item._open = this.initMenu(item.children)
          if (item._open){
            find = true
          }
        }
      }
      return find
    }
  },
  watch:{
    sideBarExpand(){
      this.sideUpdateKey = Math.random()
    }
  }
}
</script>

<style scoped>
.menu-close {
  transform: rotate(-90deg);
  transition: transform .2s;
}

.menu-open {
  transform: rotate(0deg);
  transition: transform .2s;
}

.toggle-width {
  transition: width .2s;
}

.longger {
  width: 300px;
}
</style>